<template>
  <div class="city-select">
    <search-header 
      v-model="searchValue" 
      placeholder="地区名或拼音首字母" 
      @search="onSearch" 
      @clear="onSearch" 
    />

    <div class="city-list">
      <van-cell 
        class="location" 
        icon="location-o" 
        :value="loading ? '正在定位' : '重新定位'" 
        :border="false" 
        @click="onGetCurrentCity"
      >
        <template #title>
          当前定位城市<span class="city">{{ currentCity ? currentCity.regionName : '定位中' }}</span>
        </template>
        <template #right-icon>
          <van-icon name="aim" class="right-icon" />
        </template>
      </van-cell>
      
      <empty 
        v-if="searchValue && !cityGroupList.length"
        image-type="search" 
        :show-button="false" 
        :description="'未找到关于 【' + searchValue + '】 的地区，请尝试用简短语句'" 
      />

      <van-index-bar v-else>
        <template v-for="groupItem in cityGroupList">
          <van-index-anchor :index="groupItem.pinYin" :key="groupItem.pinYin" />
          <van-cell 
            v-for="item in groupItem.list" 
            :key="item.cityId" 
            :title="item.regionName" 
            @click="onClickCity(item)"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SearchHeader from '@/components/SearchHeader'

export default {
  name: "CitySelect",
  components: { SearchHeader },
  computed: {
    ...mapGetters({
      currentCity: 'currentCity',
      cityList: 'cityList'
    })
  },
  watch: {
    cityList(list) {
      // 城市数据发生改变（通常时页面初始化时数据还没回来） 进行分组
      if (list && list.length) this.groupCityList(list)
    }
  },
  data() {
    return {
      searchValue: '',
      cityGroupList: [],
      loading: false
    }
  },
  created() {
    // 没有定位 进行定位
    if (!this.currentCity) {
      this.onGetCurrentCity()
    }
    // 有城市数据 进行分组
    if (this.cityList.length) {
      this.groupCityList(this.cityList)
    }
  },
  methods: {
    // 分组城市列表
    groupCityList(cityList) {
      const cityGroupList = []
      cityList.forEach(item => {
        const index = cityGroupList.findIndex(v => v.pinYin === item.pinYin)
        if (index == -1) {
          const len = cityGroupList.push({
            pinYin: item.pinYin,
            list: []
          })
          cityGroupList[len + index].list.push(item)
        } else {
          cityGroupList[index].list.push(item)
        }
      })
      this.cityGroupList = cityGroupList
    },
    // 点击选择城市
    onClickCity(city) {
      this.$store.commit('city/SET_CURRENT_CITY', city)
      this.$router.back()
    },
    // 搜索
    onSearch() {
      if (this.searchValue == '') {
        this.groupCityList(this.cityList)
      } else {
        const searchList = this.cityList.filter(({ pinYin, regionName }) => {
          if (pinYin.search(this.searchValue.toUpperCase()) > -1) {
            return true
          } else {
            return regionName.search(this.searchValue) > -1
          }
        })
        this.groupCityList(searchList)
      }
    },
    // 重新定位
    async onGetCurrentCity() {
      if (this.loading) return
      try {
        this.loading = true
        await this.$store.dispatch('city/getCurrentCity')
      } finally {
        this.loading = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.city-select {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .location {
    border-bottom: 1px solid $borderColor;
    .city {
      margin-left: 5px;
      font-weight: bold;
    }
    .right-icon {
      margin-left: 5px;
      font-size: 16px;
      line-height: inherit;
      color: #969799;
    }
    .van-cell__value {
      flex: none;
    }
  }
  .city-list {
    flex: 1;
    overflow-y: auto;
  }
}

</style>
